<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <!-- CSS
     ================================================== -->
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/main.css">
    <!-- favicons

================================================== -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">


</head>
<body>
<header th:fragment="header">
    <div class="header">
        <header id="header" class="row">

            <div class="header-logo">
                <a href="/catalog/view">PETSTORE</a>
            </div>

            <nav id="header-nav-wrap">



                <form action="/catalog/searchProducts" method="post" name="autoCompleteForm" class="search-container">
                    <input type="text" style="float: right" name="keyword" id="keyword" list="products" size="14" onkeyup="completeItemList();"/>
                    <datalist id="products"></datalist>

                    <input type="submit" class="search button button-primary cta "  name="searchProducts" value="Search"  style="float:left"/>
                </form>
                <!--    <div id="Search">-->
                <!--        <div id="SearchContent">-->
                <!--            <form action="/catalog/searchProducts" method="post">-->
                <!--                <input type="text" name="keyword" size="14" />-->
                <!--                <input type="submit" name="searchProducts" value="Search"/>-->
                <!--            </form>-->
                <!--        </div>-->
                <!--    </div>-->

                <ul class="header-main-nav">
                    <!-- <a th:if="${session.account} != null" href="/cart/viewCart">-->
                    <!--                <img align="middle" name="img_cart" src="/images/cart.gif" />-->
                    <!--            </a>-->
                    <!--            <a th:if="${session.account} == null" href="/account/login">-->
                    <!--                <img align="middle" name="img_cart" src="/images/cart.gif" />-->
                    <!--            </a>-->
                    <!--            <img align="middle" src="/images/separator.gif" />-->
                    <!--            <a href="/account/login" th:if="${session.account} == null">-->
                    <!--                Sign In-->
                    <!--            </a>-->
                    <!--            <a href="/account/logout" th:if="${session.account} != null">-->
                    <!--                Sign Out-->
                    <!--            </a>-->
                    <!--            <a href="/account/view_info" th:if="${session.account} != null">-->
                    <!--                <img align="middle" src="/images/separator.gif" />-->
                    <!--                My Account-->
                    <!--            </a>-->
                    <!--            <img align="middle" src="/images/separator.gif" />-->
                    <!--            <a href="/help.html">-->
                    <!--                ?-->
                    <!--            </a>-->
                    <li class="current"><a class="smoothscroll"  href="/management/viewMain" title="home">Pets</a></li>
                    <li th:if="${session.management} ne null"><a class="smoothscroll"  href="/order/viewOrderList1">Orders</a></li>
                    <li th:if="${session.management} ne null"><a class="smoothscroll"  href="/account/managementAccount">Users</a></li>
                    <li th:if="${session.management} ne null"><a class="smoothscroll" href="/account/logout">SignOut</a></li>

                </ul>


            </nav>
            <ul class="home-social-list">
                <li style="display: inline">
                    <a href="/management/viewPet?categoryId=FISH"><p6>fish</p6></a>
                </li>
                <li style="display: inline">
                    <a href="/management/viewPet?categoryId=DOGS"><p6>dogs</p6></a>
                </li>
                <li style="display: inline">
                    <a href="/management/viewPet?categoryId=REPTILES"><p6>reptiles</p6></a>
                </li >
                <li style="display: inline">
                    <a href="/management/viewPet?categoryId=CATS"><p6>cats</p6></a>
                </li>
                <li style="display: inline">
                    <a href="/management/viewPet?categoryId=BIRDS"><p6>birds</p6></a>
                </li>

            </ul>

        </header>
    </div>


    <%--
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    <!-- <html xmlns="http://www.w3.org/1999/xhtml">
     <script src="js/autoComplete.js"></script>
     <head>
         <link rel="StyleSheet" href="css/jpetstore.css" type="text/css" media="screen" />

         <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
         <title>MyPetStore</title>
         <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
         <meta http-equiv="Cache-Control" content="max-age=0" />
         <meta http-equiv="Cache-Control" content="no-cache" />
         <meta http-equiv="expires" content="0" />
         <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
         <meta http-equiv="Pragma" content="no-cache" />
     </head>

     <body>--%>


     <%--<div id="Header">

         <div id="Logo">
             <div id="LogoContent">
                 <a href="main"><img src="../images
 /logo-topbar.gif" /></a>
             </div>
         </div>

         <div id="Menu">
             <div id="MenuContent">
                 <c:if test="${sessionScope.account == null}"><a href="viewAccount?msg=SignOn"><img align="middle" name="img_cart" src="../images
 /cart.gif" /></a></c:if>
                 <c:if test="${sessionScope.account != null}"><a href="viewCart"><img align="middle" name="img_cart" src="../images
 /cart.gif" /></a></c:if>
                 <c:if test="${sessionScope.account == null}"><img align="middle" src="../images
 /separator.gif" /><a href="viewAccount?msg=SignOn">Sign In</a></c:if>
                 <c:if test="${sessionScope.account != null}"><img align="middle" src="../images
 /separator.gif" /><a href="signOut">Sign Out</a></c:if>
                 <c:if test="${sessionScope.account != null}"><img align="middle" src="../images
 /separator.gif" /><a href="viewAccount?msg=Edit">My Account</a></c:if>
                 <img align="middle" src="../images
 /separator.gif" />
                 <a href="help">?</a>
             </div>
         </div>

         <div id="Search">
             <div id="SearchContent">
                 <form action="search" method="post" name="autoCompleteForm">
                     <input type="text" name="keyword" id="keyword" list="products" size="14" onkeyup="completeItemList();"/>
                     <datalist id="products"></datalist>
                     <input type="submit" name="searchProducts" value="Search" />
                 </form>
             </div>
         </div>--%>

         <%--    <div id="QuickLinks">
         <a href="viewCategory?categoryId=FISH"><img src="../images
 /sm_fish.gif" /></a>
         <img src="../images
 /separator.gif" />
         <a href="viewCategory?categoryId=DOGS"><img src="../images
 /sm_dogs.gif" /></a>
         <img src="../images
 /separator.gif" />
         <a href="viewCategory?categoryId=REPTILES"><img src="../images
 /sm_reptiles.gif" /></a>
         <img src="../images
 /separator.gif" />
         <a href="viewCategory?categoryId=CATS"><img src="../images
 /sm_cats.gif" /></a>
         <img src="../images
 /separator.gif" />
         <a href="viewCategory?categoryId=BIRDS"><img src="../images

 /sm_birds.gif" /></a>
     </div>

     </div>&ndash;&gt; -->
</header>

</body>
</html>
<!--<!DOCTYPE html>-->
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--    <link rel="stylesheet" href="../css/jpetstore.css" type="text/css">-->
<!--</head>-->
<!--<body>-->
<!--<header th:fragment="header">-->
<!--    <div id="Logo">-->
<!--        <div id="LogoContent">-->
<!--            <a href="/catalog/main">-->
<!--                <img src="/images/logo-topbar.gif" />-->
<!--            </a>-->
<!--        </div>-->
<!--    </div>-->

<!--    <div id="Menu">-->
<!--        <div id="MenuContent">-->
<!--            &lt;!&ndash;                关于购物车跳转，判断session中的account是否为空,不为空访问cart，为空去登陆&ndash;&gt;-->
<!--            <a th:if="${session.account} != null" href="/cart/viewCart">-->
<!--                <img align="middle" name="img_cart" src="/images/cart.gif" />-->
<!--            </a>-->
<!--            <a th:if="${session.account} == null" href="/account/login">-->
<!--                <img align="middle" name="img_cart" src="/images/cart.gif" />-->
<!--            </a>-->
<!--            <img align="middle" src="/images/separator.gif" />-->
<!--            <a href="/account/login" th:if="${session.account} == null">-->
<!--                Sign In-->
<!--            </a>-->
<!--            <a href="/account/logout" th:if="${session.account} != null">-->
<!--                Sign Out-->
<!--            </a>-->
<!--            <a href="/account/view_info" th:if="${session.account} != null">-->
<!--                <img align="middle" src="/images/separator.gif" />-->
<!--                My Account-->
<!--            </a>-->
<!--            <img align="middle" src="/images/separator.gif" />-->
<!--            <a href="/help.html">-->
<!--                ?-->
<!--            </a>-->
<!--        </div>-->
<!--    </div>-->

<!--    <div id="Search">-->
<!--        <div id="SearchContent">-->
<!--            <form action="/catalog/searchProducts" method="post">-->
<!--                <input type="text" name="keyword" size="14" />-->
<!--                <input type="submit" name="searchProducts" value="Search"/>-->
<!--            </form>-->
<!--        </div>-->
<!--    </div>-->

<!--    <div id="QuickLinks">-->
<!--        <a href="/catalog/viewCategory?categoryId=FISH">-->
<!--            <img src="/images/sm_fish.gif" />-->
<!--        </a>-->
<!--        <img src="/images/separator.gif" />-->
<!--        <a href="/catalog/viewCategory?categoryId=DOGS">-->
<!--            <img src="/images/sm_dogs.gif" />-->
<!--        </a>-->
<!--        <img src="/images/separator.gif" />-->
<!--        <a href="/catalog/viewCategory?categoryId=REPTILES">-->
<!--            <img src="/images/sm_reptiles.gif" />-->
<!--        </a>-->
<!--        <img src="/images/separator.gif" />-->
<!--        <a href="/catalog/viewCategory?categoryId=CATS">-->
<!--            <img src="/images/sm_cats.gif" />-->
<!--        </a>-->
<!--        <img src="/images/separator.gif" />-->
<!--        <a href="/catalog/viewCategory?categoryId=BIRDS">-->
<!--            <img src="/images/sm_birds.gif" />-->
<!--        </a>-->
<!--    </div>-->
<!--</header>-->

<!--</body>-->
<!--</html>-->